<!--
 * @Author: 路漫漫
 * @Date: 2022-09-08 17:40:12
 * @项目描述: 
 * @Description: 花有重开日，人无再少年
-->
<template>
  <div class="page">
    <div class="header">
      <div>
        <span>所属区域:</span>
        <el-select
          v-model="form.areaId"
          placeholder="请选择"
          style="width: 200px"
        >
          <div v-for="(item, index) in areaList" :key="index">
            <el-option :label="item.orgName" :value="item.orgId" />
          </div>
        </el-select>
      </div>
      <div>
        <span>小组名称:</span>
        <el-input
          v-model="form.userNameLike"
          placeholder="请输入搜索内容"
          style="width: 200px"
          @keyup.enter.native="() => ((pageNo = 1), (total = 0), findList())"
        ></el-input>
      </div>
      <div>
        <span>小组负责人:</span>
        <el-input
          v-model="form.userNameLike"
          placeholder="请输入搜索内容"
          style="width: 200px"
          @keyup.enter.native="() => ((pageNo = 1), (total = 0), findList())"
        ></el-input>
      </div>
      <div>
        <span>联系电话:</span>
        <el-input
          v-model="form.userNameLike"
          placeholder="请输入搜索内容"
          style="width: 200px"
          @keyup.enter.native="() => ((pageNo = 1), (total = 0), findList())"
        ></el-input>
      </div>
      <div class="btn">
        <div>
          <el-button
            style="background-color: #1d976e; color: #fff"
            @click="() => ((pageNo = 1), (total = 0), findList())"
            >搜索</el-button
          >
          <el-button
            style="background-color: #1d976e; color: #fff"
            @click="() => ((form = {}), (pageNo = 1), (total = 0), findList())"
            >重置</el-button
          >
        </div>
        <div>
          <el-button
            style="background-color: #1d976e; color: #fff"
            @click="$msg('添加')"
            >添加</el-button
          >
        </div>
      </div>
    </div>
    <div class="content" id="table" ref="container">
      <el-table :data="tableData" style="width: 100%" height="100%" stripe>
        <el-table-column
          label="序号"
          type="index"
          width="60"
          :index="(params) => params + 1 + (pageNo - 1) * pageSize"
        />
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              style="color: #1d976e"
              @click="enterEdit(row)"
            >
              详情
            </el-button>
            <el-button
              type="text"
              size="small"
              style="color: #1d976e"
              @click="updateClick(row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              style="color: #1d976e"
              @click="delClick(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="(params) => ((pageNo = params), findList())"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      pageSize: 20,
      pageNo: 1,
      total: 0,
      form: {},
      // 区域list
      areaList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.findArea();
    this.findList();
  },
  mounted() {
    let height;
    let Table = document.getElementById("table");
    this.$erd.listenTo(document.getElementsByClassName("header"), (element) => {
      height = element.offsetHeight;
    });
    this.$erd.listenTo(document.getElementsByTagName("body"), (element) => {
      this.$nextTick(() => {
        Table.style.height = element.offsetHeight - (104 + height) + "px";
      });
    });
  },
  beforeDestroy() {
    // 离开页面删除检测器和所有侦听器
    this.$erd.uninstall(document.getElementsByTagName("body")); // 这里用ref是因为vue离开页面后获取不到dom
  },
  methods: {
    // 所属区域
    findArea() {
      var data = {
        depth: 1,
        isIncludeOneself: 0,
        mainType: 3,
        orgId: "l2zwys3w-1bfqt698-hsuy69-0000002",
      };
      this.$api.org_findListByCondition(data).then((res) => {
        console.log("所属区域", res);
        this.areaList = res.data;
      });
    },
    findList() {
      let data = this.filterForm({});
    },
    // 删除
    delClick(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style scoped lang='scss'>
.page {
  height: 100%;
}
.header {
  display: flex;
  flex-wrap: wrap;

  div {
    padding: 5px 10px;
  }

  .btn {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
  }
}
</style>

